<template>
	<view class="animated fadeIn faster bg-fff" style="min-height: 100vh;">
		<loadings v-if="isLoading"></loadings>
		<view class="d-flex d-flex-center pt-3">
			<text class="color999">答题总数：</text>
			<text class="mr-4 font-bold">{{total_questions}}</text>
			<text class="color999">答对题数：</text>
			<text class="colorsuccess font-bold mr-4">{{correct_answers}}</text>
			<text class="color999">合格率：</text>
			<text class="colorf00 font-bold">{{correct_rate}}</text>
		</view>
		<view class="px-3 py-3 font30">
			<view class="mb-4" v-if="current.question_type">
				<text class="bg-main colorfff rounded10 px-1 py font26 mr-1">{{current.question_type==1?'单选':'判断'}}</text>
				<text class="line-height46">{{current.question_content}}</text>
			</view>
			<view class="mb-5" v-if="current.question_type == 1">
				<view class="mb-4" v-if="current.options.A">
					<view class="d-flex d-flex-middle" @click="handlerSelect('A')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('A')==1, 'an-circle-wrong': checkAnswer('A')==2 }">
							<text class="font26">A</text>
						</view>
						<text>{{current.options.A}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.B">
					<view class="d-flex d-flex-middle" @click="handlerSelect('B')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('B')==1, 'an-circle-wrong': checkAnswer('B')==2 }">
							<text class="font26">B</text>
						</view>
						<text>{{current.options.B}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.C">
					<view class="d-flex d-flex-middle" @click="handlerSelect('C')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('C')==1, 'an-circle-wrong': checkAnswer('C')==2 }">
							<text class="font26">C</text>
						</view>
						<text>{{current.options.C}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.D" @click="handlerSelect('D')">
					<view class="d-flex d-flex-middle">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('D')==1, 'an-circle-wrong': checkAnswer('D')==2 }">
							<text class="font26">D</text>
						</view>
						<text>{{current.options.D}}</text>
					</view>
				</view>
			</view>
			<view class="mb-5" v-else>
				<view class="mb-4">
					<view class="d-flex d-flex-middle" @click="handlerSelect('对')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('对')==1, 'an-circle-wrong': checkAnswer('对')==2 }">
							<text class="font26">A</text>
						</view>
						<text>对</text>
					</view>
				</view>
				<view class="mb-4">
					<view class="d-flex d-flex-middle" @click="handlerSelect('错')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('错')==1, 'an-circle-wrong': checkAnswer('错')==2 }">
							<text class="font26">B</text>
						</view>
						<text>错</text>
					</view>
				</view>
			</view>
			<view class="p-1" v-if="records[active].user_answer != ''">
				<view class="d-flex d-flex-middle">
					<view class="d-flex d-flex-middle mr-5">
						<text class="mr-2 font26">正确答案</text>
						<text class="colorsuccess font30">{{list[active].answer}}</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="mr-2 font26">您选择</text>
						<text class="font30 colorf00">{{records[active].user_answer}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="records[active].user_answer && list[active].explanation">
			<view class="bg-f2f2f2" style="height: 12rpx;"></view>
			<view class="d-flex d-flex-middle d-flex-center py-2"><text>试题详解</text></view>
			<view class="px-3 pb-3">
				<view class="font26 line-height40 color999">
					{{list[active].explanation}}
				</view>
			</view>
		</view>
		<view class="fix-card left-0 right-0 bottom-0">
			<view class="px-3 d-flex d-flex-middle d-flex-between">
				<view class="d-flex d-flex-column d-flex-middle d-flex-center mr-3" @click="favClick">
					<text class="iconfont font32" :class="isFav?'icon-shoucang-copy coloryellow':'icon-shoucangxingxing color666'"></text>
					<text class="font22 color666" >收藏</text>
				</view>
				
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="popNote">
					<text class="iconfont icon-xinxi font32 color666"></text>
					<text class="font22 color666" >笔记</text>
				</view>
				<view class="d-flex-item d-flex-center d-flex d-flex-middle">
					<view class="step" @click="preStep">
						<text class="font24" :class="active>0?'color666':'colorhold'">上一题</text>
					</view>
					<view class="d-flex d-flex-center d-flex-middle mx-5">
						<text class="font26">{{active+1}}/{{list.length}}</text>
					</view>
					<view class="step" @click="nextStep">
						<text class="font24" :class="active < list.length-1 ?'color666':'colorhold'">下一题</text>
					</view>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="openCard">
					<text class="iconfont icon-datiqia color999 font32"></text>
					<text class="font22 color666">答题卡</text>
				</view>
			</view>
		</view>
		
		<uni-popup ref="cardPopup" @touchmove.stop.prevent="moveHandle" type="bottom" style="position: relative;z-index: 999991;">
			<view class="wrap">
				<view class="py-3 d-flex d-flex-between d-flex-middle mb-2">
					<view class="pl-3" style="width: 120rpx;">{{active+1}}/{{list.length}}</view>
					<text class="font30 color000">答题卡</text>
					<view class="d-flex d-flex-middle d-flex-end pr-3" style="width: 120rpx;"><text class="iconfont icon-cuo font30 color999" @click="closeCard"></text></view>
				</view>
				<!-- <view class="d-flex d-flex-center d-flex-middle mb-4">
					<text class="iconfont icon-cuo1 mr-1 colorf00"></text><text class="mr-5">{{checkNum[1]}}</text>
					<text class="iconfont icon-dui1 mr-1 colorsuccess"></text><text>{{checkNum[0]}}</text>
				</view> -->
				<view class="pb-4">
					<scroll-view scroll-y style="height: 700rpx;" :scroll-top="scroll_top" scroll-with-animation>
						<view class="px-3 d-flex d-flex-wrap">
							<view class="span-4 d-flex d-flex-center mb-2" v-for="(an,anindex) in records" :key="an.id">
								<view class="an-circle position-relative" :class="{ 'an-circle-correct': isAnCorrect(anindex,an.user_answer)==1, 'an-circle-wrong': isAnCorrect(anindex,an.user_answer)==2 }" @click="setQuestion(anindex)">
									<text>{{anindex+1}}</text>
									<view class="d-flex d-flex-center d-flex-middle an-circle-curr" v-if="active == anindex">当前</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="note" type="bottom" :safe-area='false'>
			<view class="popup-wrap">
				<view class="popup-hd">
					<text>添加笔记</text>
					<view class="popup-close d-flex d-flex-middle" @click.stop="closeNote()">
						<text class="iconfont icon-cuo font30 colorhold"></text>
					</view>
				</view>
				<view class="p-2 mb-3">
					<textarea v-model="note" placeholder="点击添加笔记" placeholder-class="colorhold" style="width: 100%;height: 200rpx;"></textarea>
				</view>
				<view class="p-2">
					<view class="bg-main d-flex d-flex-middle d-flex-center rounded15 py-2">
						<text class="colorfff">保存</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { userApi } from "@/http/userApi"
	import store from '@/store/index.js'
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				isLoading:true,
				timeupSecond:100,
				scroll_top: 0,
				active:0,
				disabled:false,
				status:1,
				eid:'',
				answerType:'3',
				correct_rate:'0%',
				correct_answers:0,
				total_questions:20,
				countdown:'00:00:00',
				totalDuration:7200,
				isFav:false,
				timer:null,
				current:{},
				note:'',
				currentAnswer:{},
				records:[
					{
						question_id:'',
						user_answer:''
					}
				],
				list:[]
			}
		},
		onLoad(e) {
			if(e && e.eid){
				this.getTrueExam(e.eid)
			}else{
				uni.showToast({
					title:'试卷不存在！'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
			
		},
		computed:{
			...mapState({
				loginState: state => state.loginState,
				cid: state => state.cid
			}),
			checkAnswer(){
				return function(answ){
					if(this.records[this.active].user_answer == ''){
						return 0
					}
					if(this.records[this.active].user_answer == answ){
						if(this.list[this.active].answer == answ){
							return 1
						}else{
							return 2
						}
					}
				}
			},
			isAnCorrect(){
				return function(index,answ){
					if(answ == ''){
						return 0
					}
					if(this.list[index].answer == answ){
						return 1
					}else{
						return 2
					}
				}
			},
		},
		watch:{
			active(newActive,oldActive){
				this.current = this.list[newActive]
			}
		},
		methods: {
			//获取真题题目
			getTrueExam(eid){
				let that = this
				userApi.examDetail(eid).then((res)=>{
					that.isLoading = false
					that.list = res.answers_list.map(exam=>({
						...exam,
						answer:exam.correct_answer
					}))
					that.current = that.list[0]
					that.correct_rate = res.correct_rate
					that.correct_answers = res.correct_answers
					that.total_questions = res.total_questions
					that.answerType = res.answer_type
					that.records = res.answers_list.map(item=>({'question_id':item.id,'user_answer':item.user_answer}))
				}).catch((e)=>{
					that.isLoading = false
				})
			},
			//获取定期考试
			getPeriodExam(cid){
				let that = this
				userApi.getPeriodicList(cid).then((res)=>{
					that.isLoading = false
					that.list = res.questions
					that.current = that.list[0]
					that.answerType = '4'
					that.eid = res.periodic_exam_id
					that.timeupSecond = res.duration*60
					that.records = res.questions.map(item=>({'question_id':item.id,'user_answer':'B'}))
				}).catch((e)=>{
					that.isLoading = false
				})
			},
			//选择答案
			handlerSelect(ans){
				console.log('ans',ans)
				// let that = this
				// if(that.records[that.active].user_answer == ''){
				// 	that.records[that.active].user_answer = ans
				// }
			},
			async goResult(){
				let that = this
				let unWriteNum = that.records.filter(item=>item.user_answer == '').length
				let cntStr = unWriteNum?`还有${unWriteNum}题没有做答，确定提交？`:'确定提交考试答案？'
				uni.showModal({
					'title': '提示',
					'content': cntStr,
					success: (res) => {
						if (res.confirm) {
							that.saveAnswer()
						}
					}
				})
			},
			saveAnswer(){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				userApi.saveAnswers({'records':that.records,'answer_type':that.answerType,'paper_id':that.eid}).then((res)=>{
					uni.hideLoading()
					that.$refs.cardPopup.close()
					uni.showToast({
						title:'答题完成！'
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/exams/exams'
						})
					},1000)
				}).catch((e)=>{
					uni.hideLoading()
				})
			},
			timeup(){
				uni.showToast({
					title: '时间到',
					icon:'none'
				})
			},
			favClick(){
				this.isFav = !this.isFav
			},
			preStep(){
				if (this.active > 0) {
				    this.active--
				}
			},
			nextStep(){
				if (this.active < this.list.length - 1) {
				    this.active++
				}else{
					uni.showToast({
						title:'没有更多试题了！',
						icon:'none'
					})
				}
			},
			openCard(){
				this.$refs.cardPopup.open()
			},
			closeCard(){
				this.$refs.cardPopup.close()
			},
			setQuestion(index){
				this.active = index
				this.$refs.cardPopup.close()
			},
			moveHandle() {
				return false
			},
			popNote(){
				this.$refs.note.open()
			},
			closeNote(){
				this.$refs.note.close()
			}
		}
	}
</script>
<style scoped>
.answer-option{
	width: 56rpx;
	height: 56rpx;
	border-radius: 56rpx;
	background-color: #fff;
	border: solid 1px #f9f9f9;
}
.correct-option{
	background-color: #3dc092;
	border-color: #3dc092;
	color: #ffffff;
}
.error-option{
	background-color: #f5615e;
	border-color: #f5615e;
	color: #ffffff;
}
.fix-card{
	padding-top: 15rpx;
	padding-bottom: 50rpx;
	position: fixed;
	border-top: solid 1px #ebebeb;
	background-color: #f5f5f7;
}
.step{
	border: solid 1px #ddd;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
}
.an-circle{
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 80rpx;
	border: solid 1px #dddddd;
	overflow: hidden;
}
.an-circle-curr{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30rpx;
	background-color: rgba(0,0,0,.6);
	font-size: 18rpx;
	color:#fff
}
.an-circle-correct{
	background-color: #3dc092;
	color: #fff;
	border-color: #3dc092;
}
.an-circle-wrong{
	background-color: #f5615e;
	color: #fff;
	border-color: #f5615e;
}
.popup-wrap{
	width:750rpx;
	background-color: #FFFFFF;
	border-radius:25rpx 25rpx 0 0;
	min-height: 500rpx;
}
.popup-hd{
	background-color: #f5f5f5;
	border-radius:25rpx 25rpx 0 0;
	height: 80rpx;
	line-height: 80rpx;
	position: relative;
	text-align: center;
	font-size: 24rpx;
}
.popup-close{
	position: absolute;
	height: 80rpx;
	top: 0;
	right: 20rpx;
}
</style>
